<template>
  <div>
    <div v-for="item in categoryListArr" :key="item.id">
      <h4>{{ item.name }}</h4>
      <ul>
        <li v-for="item1 in item.goodsList" :key="item1.id">
          <img v-lazy="item1.list_pic_url" alt="">
          <p>{{ item1.name }}</p>
          <span>{{ item1.retail_price | formatMoney }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入懒加载


export default {
  name: "Loading",
  props: ["categoryListArr"],
  data() {
    return {
      imageList: [],
    };
  },
  created() {
    // this.imageList = this.categoryListArr.list_pic_url;
    // console.log(this.categoryListArr);
  },
};
</script>

<style lang='less' scoped>
div {
  text-align: center;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 50%;
    img {
      width: 100%;
      display: block;
    }
    p {
      font-size: 17px;
      margin-bottom: 5px;
    }
    span {
      font-size: 16px;
    }
  }
}
</style>